<template>
  <div class="hot-wrap">
    <div class="title">{{title}}</div>
    <ul class="hot-list">
      <li class="item"
          v-for="item of list"
          :key="item.id"
          @click="handleDetail(item)">
        <div class="img-wrap"
             w-337-336
             aspectratio>
          <img v-lazy="item.product_img"
               alt=""
               aspectratio-content>
        </div>
        <div class="bottom">
          <div class="item-title">{{item.product_name}}</div>
          <div class="price">￥{{item.sales_price}}</div>
          <div class="original-price">￥{{item.market_price}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BuyHot',
  data () {
    return {
      title: '热门优惠'
    }
  },
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    handleDetail (item) {
      const id = item.id
      this.$router.push({
        path: `/bookDetail/${id}`
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.hot-wap
  width 100%

.title
  font-size $address
  font-weight bold
  color $footer_bgc
  width 100%
  line-height 76px
  text-indent 23px
  position relative

  &::before
    content ''
    position absolute
    width 5px
    height 24px
    background $service
    border-radius 2px
    top 50%
    left 0
    transform translateY(-50%)

.hot-list
  width 100%
  padding()
  display flex
  justify-content space-between
  flex-wrap wrap

  .item
    width 341px
    height 487px
    background $common_bgc
    border 2px solid rgba(230, 230, 230, 1)
    margin-bottom 20px

    .img-wrap
      margin-bottom 9px

    .bottom
      width 100%
      height calc(487px - 336px)
      padding-left 19px
      box-sizing border-box

      .item-title
        width 100%
        padding()
        ellipsis()
        font-size $shop_name
        font-weight 500
        color $common_fz_color
        line-height 54px

      .price
        width 100%
        padding()
        ellipsis()
        font-size $common_fz
        font-weight bold
        color $price
        line-height 44px

      .original-price
        width 100%
        padding()
        ellipsis()
        font-size $common_fz
        font-weight 400
        color $original_price
        line-height 32px
        text-decoration line-through
</style>
